import axios from 'axios'

// 导出一个对象
export default {
  // 开启命名空间
  namespaced: true,
  state: {
    list: []
  },
  mutations: {
    setList (state, list) {
      state.list = list
    },
    // 根据传递过来的 id 和数量进行修改
    setListCount (state, obj) {
      // 根据 id 找到数组中的元素
      const result = state.list.find(item => item.id === obj.id)
      // console.log(result)
      // 修改元素的 count 属性
      result.count = obj.num
    }
  },
  actions: {
    // 由于数据在服务器上, 获取数据是异步操作, 所以要在 actions 中写代码
    async getCarts (context) {
      const res = await axios.get('http://localhost:3000/cart')
      // console.log(res)
      // 子模块内部调用不需要加模块名
      context.commit('setList', res.data)
    },
    // 修改某个商品的信息
    // 请求地址: http://localhost:3000/cart/:id
    // 请求方法: patch
    // 请求参数: { 要修改的数据: 要修改的值 }
    async setCount (context, obj) {
      // get 获取
      // post 新增
      // patch 部分修改
      // put 全部修改
      await axios.patch('http://localhost:3000  /cart/' + obj.id, {
        count: obj.num
      })
      // console.log(res)
      // 此时有两个解决方案:
      // 1. 调用一下 getCarts, 重新获取一次数据
      // context.dispatch('getCarts')
      // 2. 修改本地的数据, 和服务器保持一致
      // 复习基础
      context.commit('setListCount', obj)
    }
  },
  getters: {
    // Vuex 的计算属性
    // getters 的第一个参数永远都是 state
    totalCount (state) {
      return state.list.reduce((sum, item) => sum + item.count, 0)
    },
    totalPrice (state) {
      return state.list.reduce((sum, item) => sum + item.count * item.price, 0)
    }
  }
}
